<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100vh;
            height: 100vh;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        .BMap_cpyCtrl {
            display: none;
        }

        .anchorBL {
            display: none;
        }
    </style>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=orRAyNA22FrzmG9B61BkNQZPI1KR41tO"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>地图展示</title>
</head>

<body>
    <!-- <img src="bus.png" alt=""> -->
    <div id="allmap"></div>

</body>

</html>
<script type="text/javascript">
    // 百度地图API功能
    document.querySelector('body').style.zoom = window.innerWidth / 1000
    function GetParams() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
    var params = GetParams()
    var map = new BMap.Map("allmap");    // 创建Map实例
    // map.centerAndZoom(cityName);  // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
    }));
    // map.setCurrentCity("广州");          // 设置地图显示的城市 此项是必须设置的
    // map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    // var map = new BMap.Map("map_container");
    var cityName = params.city;
    console.log('cityName' + cityName)
    map.centerAndZoom(cityName, 8);                     // 初始化地图,设置中心点坐标和地图级别。    map.addControl(new BMap.ScaleControl());                   // 添加比例尺控件
    // map.MapTypeControl()
    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
    map.enableScrollWheelZoom();
    map.setMapType(BMAP_HYBRID_MAP)
    map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE, anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(40, 250) }));
    var bdary = new BMap.Boundary();
    function getRegion() {
        dataArr.forEach(element => {
            var bdary = new BMap.Boundary();
            bdary.get(element['name'], rs => {
                var count = rs.boundaries.length;
                for (let i = 0; i < count; i++) {
                    var ply = new BMap.Polygon(rs.boundaries[i], {
                        strokeWeight: 0.5, strokeColor: '#fff', fillOpacity: Math.random(1), fillColor: '#a9dbf7'
                    });
                    this.map.addOverlay(ply);
                }
                citySetLabel(new BMap.Point(element['cp'][0], element['cp'][1]), element['name']);
            });
        });
    }
    function citySetLabel(cityCenter, cityName) {
        var label = new BMap.Label(cityName, {
            offset: new BMap.Size(-20, -10),
            position: cityCenter
        });
        label.setStyle({
            border: 'none',
            background: 'transparent',
            'font-size': '0.25rem',
            color: '#fff',
        });
        map.addOverlay(label);
    }
    var dataArr = [
        {
            "name": '安顺市',
            "cp": [105.9082, 25.9882]
        },
        {
            "name": "贵阳市",
            "cp": [106.6992, 26.7682]
        },
        {
            "name": "遵义市",
            "cp": [106.908, 28.1744]
        },
        {
            "name": "黔东南苗族侗族自治州",
            "cp": [108.519944, 26.835886]
        },
        {
            "name": "毕节市",
            "cp": [105.1611, 27.0648]
        },
        {
            "name": "黔南布依族苗族自治州",
            "cp": [107.235181, 25.705737]
        },
        {
            "name": "黔西南布依族苗族自治州",
            "cp": [105.5347, 25.3949]
        },
        {
            "name": "六盘水市",
            "cp": [104.7546, 26.0925]
        },
        {
            "name": "铜仁市",
            "cp": [108.6218, 28.0096]
        }];
    bdary.get(cityName, function (rs) {
        // console.log(rs)
        // //获取行政区域       
        // map.clearOverlays();        //清除地图覆盖物  

        // //for循环都删除掉了，只剩下这个
        // //网上查了下，东西经南北纬的范围
        // var EN_JW = "180, 90;";         //东北角
        // var NW_JW = "-180,  90;";       //西北角
        // var WS_JW = "-180, -90;";       //西南角
        // var SE_JW = "180, -90;";        //东南角
        // //4.添加环形遮罩层
        // var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", fillOpacity:1, strokeOpacity: 0.5 }); //建立多边形覆盖物

        // map.addOverlay(ply1);  
        // // 5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
        // var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#00f",fillColor: "" });
        // map.addOverlay(ply); 
        // map.setViewport(ply.getPath());    //调整视野
        const count = rs.boundaries.length;
        if (count === 0) {
            return;
        }
        const EN_JW = '180, 90;';
        const NW_JW = '-180,  90;';
        const WS_JW = '-180, -90;';
        const SE_JW = '180, -90;';
        // 东南西北四个角添加一个覆盖物
        const ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW,
            { strokeColor: 'none', fillColor: '#333', fillOpacity: 0.9, strokeOpacity: 1 });
        // map.addOverlay(ply1);
        // 绘制‘贵州省’整体的外轮廓
        for (let i = 0; i < count; i++) {
            const ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 0.5, strokeColor: '#333', fillColor: '#999' });
            map.addOverlay(ply);
        }
        getRegion()
    });

    var geolocationControl = new BMap.GeolocationControl();

    geolocationControl.addEventListener("locationSuccess", function (e) {
        // 定位成功事件
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
        alert("当前定位地址为：" + address);
    });
    geolocationControl.addEventListener("locationError", function (e) {
        // 定位失败事件
        alert(e.message);
    });
    map.addControl(geolocationControl);
    // map.setMapStyle({ style: 'dark' })
    // addMark()
    function remove_overlay() { // 清除覆盖物s
        map.clearOverlays();
    }
    function addMark() {

        var point = new BMap.Point(114.187729, 23.000593);

        // map.centerAndZoom(point, 15);
        var marker = new BMap.Marker(point);  // 创建标注
        remove_overlay();
        map.addOverlay(marker);               // 将标注添加到地图中
        // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        var label = new BMap.Label("潼湖科技小镇", { offset: new BMap.Size(20, -10) });
        marker.setLabel(label);
    }
    var count = 0;
    // $.ajax({
    //     method: 'post',
    //     url: 'http://iotapi.bgycc.com/v2/service/iot/query?service=vehicle_video&object=gps_event',
    //     data: ` {
    //         "offset": 0,
    //         "limit": 1,
    //         "query": {
    //             "device_id": { "in": "${params.device_id}" }
    //         }}`
    //     ,
    //     headers: {
    //         'Access-Token': 'OTZDOEQwREZBN0Y4RjY0NUFGRkY0NzQwMUU1NjFDNjQxNUM3MEE4QzY4N0E1QjBFQTNBM0U2QzU5OUVGNENGQw=='
    //     }
    // }).then(res => {
    //     count = res.count;

    //     setInterval(function () {
    //         $.ajax({
    //             method: 'post',
    //             url: 'http://iotapi.bgycc.com/v2/service/iot/query?service=vehicle_video&object=gps_event',
    //             data: ` {
    //         "offset":${count ? count - 1 : 0},
    //         "limit": 1,
    //         "query": {
    //             "device_id": { "in": "${params.device_id}" }
    //         }}`
    //             ,
    //             headers: {
    //                 'Access-Token': 'OTZDOEQwREZBN0Y4RjY0NUFGRkY0NzQwMUU1NjFDNjQxNUM3MEE4QzY4N0E1QjBFQTNBM0U2QzU5OUVGNENGQw=='
    //             }
    //         }).then(result => {
    //             var myIcon = new BMap.Icon("bus.png", new BMap.Size(50, 50), {
    //                 anchor: new BMap.Size(25, 25),
    //                 imageOffset: new BMap.Size(0, 0)   // 设置图片偏移    

    //             });
    //             count = result.count;
    //             addMark()
    //             myIcon.setImageUrl("bus.png");
    //             myIcon.setSize(new BMap.Size(50, 50))
    //             var point = new BMap.Point(result.list[0].video_longitude, result.list[0].video_latitude);
    //             console.log(point, myIcon)
    //             // map.centerAndZoom(point, 15);
    //             var marker = new BMap.Marker(point, { icon: myIcon });  // 创建标注
    //             marker.getIcon()
    //             console.log(marker.getIcon())
    //             var label = new BMap.Label("设备" + params.device_id, { offset: new BMap.Size(20, -10) });
    //             marker.setLabel(label);
    //             map.addOverlay(marker);               // 将标注添加到地图中
    //             // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    //         })
    //     }, 1000)
    // })
</script>